import { Button, Form, Input, message } from "antd";
import { register } from '../../services/api';

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
interface Props{
    isRegis:()=>void
}
function Register(props:Props) {
    const onFinish = async (values: any) => {
        console.log(values);
        register(values.account, values.password).then((result=>{
        if(result.stat==='Err_User_Exist')  message.error('账号重复，请重新创建！')
        if(result.stat==='ok'){
            message.success('恭喜注册成功，请登录')
            props.isRegis()
        }
        }))
    }
    return (<Form
        {...formItemLayout}
        name="register"
        onFinish={onFinish}
    >
        <Form.Item
            name="account"
            label="账号"
            rules={[{ required: true, message: '账号不能为空!', whitespace: true }]}
        >
            <Input maxLength={18}/>
        </Form.Item>

        <Form.Item
            name="password"
            label="密码"
            rules={[
                {
                    required: true,
                    message: '密码不能为空!',
                },
                ()=>({
                    validator(_, value) {
                        if (value.replace(/[^a-zA-Z]/g,'')&&value.replace(/\D/g,'')&&value.length>=6) {
                            return Promise.resolve();
                        }
                        return Promise.reject(new Error('请输入至少包含数字和字母两种，长度6~20位密码!'));
                    }
                })
            ]}
            hasFeedback
        >
            <Input.Password maxLength={20}/>
        </Form.Item>
        <Form.Item
            name="confirm"
            label="确认密码"
            dependencies={['password']}
            hasFeedback
            rules={[
                {
                    required: true,
                    message: '请再次输入密码!',
                },
                ({ getFieldValue }) => ({
                    validator(_, value) {
                        if (!value || getFieldValue('password') === value) {
                            return Promise.resolve();
                        }
                        return Promise.reject(new Error('两次输入密码不相同，请重新输入!'));
                    },
                }),
            ]}
        >
            <Input.Password />
        </Form.Item>

        <Form.Item>
            <Button type="primary" htmlType="submit" className="register-form-button form-button">
                注册
            </Button>
        </Form.Item>
    </Form>
    )
}
export default Register